<template>
  <div id="app">
      <span class="iconfont icon-xiaoqing-tubiao-pinglun"></span>
      <div class="left">
        <div class="top">
          <h3>列表</h3>
          <div>
            <span @click="isShow = !isShow">新增</span>
            <ul v-show="isShow">
              <li v-for="(item,i) in list" :key="i" @click="add(item)">{{item.type}}</li>
            </ul>
          </div>
        </div>

        <table>
          <tr>
            <th>类型</th>
            <th>账号</th>
            <th>提示内容</th>
            <th>操作</th>
          </tr>
          <el-tr v-for="(item,i) in addList" 
            :key="i"
            :id="item.id"
            :type="item.type"
            :tip="item.tip"
            :account="item.account"
            @del="delItem"
            @change="change"
          ></el-tr>
        </table>
      </div>
      <div class="right">
        <el-icon v-for="(item,i) in addList"
          :key="i"
          :tip="item.tip"
          :iconClass="item.iconClass"
          :bgColor="item.bgColor"
        ></el-icon>
      </div>
  </div>
</template>

<script>
import list from '../mock/list'
import elTr from './components/elTr'
import elIcon from './components/elIcon'
export default {
  name: 'App',
  data(){
    return {
      list,
      isShow:false,
      addList:[]
    }
  },
  components: {
    elTr,
    elIcon
  },
  methods:{
    add(target){
      if(this.addList.findIndex(item => item.id === target.id) != -1){
        alert("已经添加");
        return
      }
      this.addList.push(target)
    },
    delItem(id){
      let index = this.addList.findIndex(item => item.id === id);
      this.addList.splice(index,1);
    },
    change(val,id){
      this.addList.forEach(item => {
        if(item.id === id){
          item.tip = val;
        }
      })
    }
  }
}
</script>

<style>
@import url('./font/iconfont.css');
</style>
